<template>
    <el-tabs
        v-model="now_tab"
        type="card"
        class="demo-tabs"
        closable
        @tab-remove="removeTab"
    >
        <el-tab-pane
        v-for="item in btn_store.new_tabs_list"
        :key="item.name"
        :label="item.title"
        :name="item.name"
        >
        <component :is="components[item.component]" />
        </el-tab-pane>
    </el-tabs>
</template>
<script  setup>
import { ref } from 'vue'
import login from '@/views/login/index.vue'
import shouye from '@/views/shouye/index.vue'
import jiazi from '@/views/layout/index.vue'
import department from '@/views/system/department_manager/index.vue'
import menu from '@/views/system/menu_manager/index.vue'
import position from '@/views/system/position_manager/index.vue'
import role from '@/views/system/role_manager/index.vue'
import service from '@/views/system/service_manager/index.vue'
import user_manager from '@/views/system/user_manager/index.vue'
import {Button_Store} from '@/stores/index'
import { computed } from 'vue'
import { ElMessage } from 'element-plus'


const btn_store = Button_Store()
// const editableTabsValue = ref('首页')

const removeTab = (targetName) => {
    console.log(targetName)
    if(targetName == "首页"){
        ElMessage.error("首页不能关闭奥~~~")
        return
    }
    let now_index = btn_store.new_tabs_list.findIndex(item => item.name === targetName )
    if(btn_store.now_tab === targetName){
        btn_store.now_tab = btn_store.new_tabs_list[now_index-1].name
    }
    btn_store.new_tabs_list.splice(now_index,1)
  }

const components = {
  shouye,
  user_manager,
  service,
  role,
  menu,
  department,
  position
}

const now_tab = computed({
  get: () => btn_store.now_tab,
  set: (value) => {
    btn_store.now_tab = value
  }
})
</script>
<style>

</style>
